<template>
  <div>
    <ul class="tab">
      <li v-for="(item, index) in tab" @click="change(index)" :class="idx == index ? 'on' : ''">{{ item }}</li>
    </ul>
    <component :is="currenCompent"></component>

  </div>
</template>
<script>

import {getMoneyInfo,setInitMOney,goXiaBan,getWorkRecord,getDetailInfo} from "@/api/mahjong/record";
import top from "./top";
import down from "./down";
export default {
  name: "Druid",
  components: {top, down},
  data() {
    return {
      tab: ['员工交班', '交班查询'],

      currenCompent: 'top',
      idx: 0,
      form: {
        date: ''
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      visible: false,
      incomeVisible: false,
      handoverVisible: false,
      goWorkTanKuang: false,
      goXiaBanTanKuang: false,
      integralList:[],
      getWorkRecordData:[],
      initMoney:0,
      deliverMoney:0,
      remainingMoney:0,
      tableData: [{
        date: '2099-09-09  09:00:14',
        money: '966',
        yuangong: 'user123456'
      }, {
        date: '2099-09-09  09:00:14',
        money: '966',
        yuangong: 'user123456'
      }, {
        date: '2099-09-09  09:00:14',
        money: '966',
        yuangong: 'user123456'
      }, {
        date: '2099-09-09  09:00:14',
        money: '966',
        yuangong: 'user123456'
      }],
      tableData1: [{
        name: '香烟',
        num: '5',
        money: '966'

      }, {
        name: '香烟',
        num: '5',
        money: '966'
      }, {
        name: '香烟',
        num: '5',
        money: '966'
      }, {
        name: '香烟',
        num: '5',
        money: '966'
      }]
    };
  },
  created() {
    this.initGetMoney();
    this.initWorkRecord();
  },
  mounted: function () {

  },
  methods: {

    /** 收支明细按钮 */

    /** 上班按钮操作 */
    MyGoWork(initMoney) {
      setInitMOney(initMoney).then(response => {
        //关闭弹框
        this.goWorkTanKuang = false;
        this.setInitMOney = response.data;
      }).then(() => {
        // this.msgSuccess(this.setInitMOney);
        this.msgSuccess("上班成功");
      }).catch(function() {});
    },
    /** 下班按钮操作 */
    MyXiaBanWork(deliverMoney,remainingMoney) {
      goXiaBan(deliverMoney,remainingMoney).then(response => {
        //关闭弹框
        this.goXiaBanTanKuang = false;
        this.xiabanInfo = response.data;
      }).then(() => {
        this.msgSuccess("下班成功");
      }).catch(function() {});
    },
    /** 查询金额 */
    initGetMoney() {
      getMoneyInfo().then(response => {
        this.integralList = response.data;
        // this.total = response.total;
        // this.loading = false;
      })
    },
    /** 查询交班记录 */
    initWorkRecord() {
      getWorkRecord(this.queryParams).then(response => {
        this.getWorkRecordData = response.rows;
         this.total = response.total;
        this.loading = false;
      })
    },
    change(index) {

      if (this.idx === index || index === undefined) {
        return false;
      } else {
        this.idx = index;
      }

      if (index == 0) {
        this.currenCompent = 'top';
      }
      if (index == 1) {
        this.currenCompent = 'down'
      }
    },
    confirm() {
      this.handoverVisible = false
      this.$message({
        message: '交班成功',
        type: 'success'
      })

    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.tab {
  background-color: #fff;
  padding: 10px 20px;

  li {
    display: inline-block;
    width: 105px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #9C9186;
    font-size: 16px;
    cursor: pointer;

    &.on {
      background-color: #CAAB62;
      color: #fff;
      border-radius: 2px;
    }
  }
}

.title {
  font-size: 20px;
  color: #CAAB62;

}

.date {
  text-align: right;
  margin-bottom: 20px;
}

.jine {
  color: #CAAB62;

  font-size: 14px;

  p {
    color: #201D1B;
    margin-top: 5px;
  }

  span {
    font-size: 28px;
  }
}

.txtright.btn {
  text-align: right;
  margin-top: 20px;

}

.list {
  font-size: 14px;
  color: #292929;
  line-height: 30px;

  .colory {
    color: #9C9186;
  }
}

.txtcenter {
  margin-bottom: 20px;
  font-size: 14px;
}

.money {
  color: #CAAB62;
}

.bgf {
  background-color: #fff;
  padding: 20px 30px;
  margin-top: 20px;

  .tongji {
    align-items: center;

    .item {
      display: flex;
      align-items: center;

      li {
        color: #9C9186;
        font-size: 14px;
        margin-left: 15px;
        line-height: 25px;

        span {
          color: #CAAB62;
          font-size: 20px;
        }
      }
    }

  }

  .txtright {
    text-align: right;

    button {
      margin-left: 20px;
    }
  }

  .paginations {
    text-align: center;
    margin-top: 20px;
  }

  .tables {
    margin-top: 20px;

    .shouzhi {
      border: 1px solid #CAAB62;
      color: #CAAB62;

      &:visited,
      &:hover,
      &:active {
        background-color: #CAAB62;
        color: #fff;
      }
    }

    .chuku {
      border: 1px solid #1085FF;
      color: #1085FF;

      &:visited,
      &:hover,
      &:active {
        background-color: #1085FF;
        color: #fff;
      }
    }
  }

  .time {
    color: #9C9186;
    align-items: center;
    margin-top: 20px;

    span {
      color: #292929;

      &.mar50 {
        margin-right: 50px;
      }
    }

    button {
      width: 285px;
    }
  }
}
</style>
